<template>
    <div class="header-box">
        <div class="head-left">
            <!-- 导航时间 -->
            <div class="time">
            <div>{{nowTime|day}}</div> 
            <div class="small">{{nowTime|month}}月</div>
                </div>
                <!-- 分割线 -->
            <div class="split"></div>
            <div class="title"><h2>知乎日报</h2> </div>
        </div>
        <!-- 导航头像 -->
        <div class="head-right">
            <div class="touxiang" @click="Logon()"><img :src="Icon" alt=""></div>
        </div>
    </div>
</template>

<script>
    import moren from '../assets/moren.jpg';
    import myicon from '../assets/myicon.jpg';
    

    export default {
        name:'Header',
        data(){
            return{
               nowTime:[],
                username:'',
                password:'',
                Icon:moren,
            }
            
        },

        components:{
            moren,
            myicon,
        },

        filters:{

             month(val){
                 
            return val.slice(-4,-2);
                
        },
            day(val){
                return val.slice(-2) ;
            }
        },
        
        

        created(){
            this.getTime();
            
            
        },

         mounted(){
            this.getCookie()
            
            this.getIcon()
        },


        methods:{

            getIcon(){
                if(this.username=='Admin'&& this.password==='123456'){
                     this.Icon=myicon
                }
            },


            Logon(){
            if(this.username=='Admin'&& this.password==='123456'){
                
                
                this.$router.push({name: 'Logoned', params: {}});

            }else{

            this.$router.push({name: 'Logon', params: {}});
        }   
            

        },
        // 页面刷新时获取cookie
        

        //读取cookie
         getCookie() {
        if (document.cookie.length>0) {
            let arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
            
            for(let i=0;i<arr.length;i++){
                let arr2=arr[i].split('=');//再次切割
                
                //判断查找相对应的值
                if(arr2[0]=='userName'){
                this.username=arr2[1];//保存到保存数据的地方
                }else if(arr2[0]=='userPwd'){
                this.password=arr2[1];
                }
            }
            }
        },


           getTime(){
            this.axios({
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/stories/latest',

                

            }).then(result =>{
                
                this.nowTime= result.data.date;
                
                
                
            }).catch(err =>{
                
            })
        },

       

        }
    }
</script>

<style lang="less" scoped>
    .header-box{
        
        display: flex;
        justify-content: space-between;
        height: 80px;
        background-color: rgb(255, 255, 255);
    }

    .head-left{
        display: flex;
        align-items: center;
        
        // width: 180px ;
        
    }

    .split{
        width: 1px;
        height: 40px;
        background-color: rgb(102, 89, 72);
        margin: 10px;
    }
    

    .time{
        margin-left: 10px;
        text-align: center;
        font-size: 20px;
        
        
    }

    .small{
        font-size: 14px;
        
    }

    .title{
       font-size: 18px;
    }
    
    .head-right{
        display: flex;
        align-items: center;
        width: 60px;    
        
        
    }

    .touxiang{
        width: 45px;
        height: 45px;
    }

    img{
        
        width: 100%;
        height: 100%    ;
        border-radius: 50%;
    }




</style>